<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title id="domTitle"></title>
		<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" />
		<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" th:href="@{/js/booklist/bookDetail_css.css}"/>
		
		<script th:src="@{/js/jquery.js}"></script>
		<script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
		<script type="text/javascript" th:src="@{/js/vue.js}"></script>

	</head>
	<body>
		<div id="app" class="container-fluid">
			
			<div class="row">
				<div class="col-md-2" >
					<div class="row">
						<div class="col-md-6" style="margin: 0;">
							<img th:src="|/${session.user.headImg}|" class="author-headImg">
						</div>
						<div class="col-md-6" style="margin-top:10px ;margin-left: 0rem; height: 5rem;
													line-height: 20px;">
							<label class="ziliao" th:text="|名字:${session.user.username}|"></label><br>
							<label class="ziliao" th:text="|性别:${session.user.gender}|"></label><br>
							<label class="ziliao" th:text="|指数:${session.user.level}|"></label><br>
							<label v-show="false" id="userId" th:text="${session.user.id}"></label>
						</div>
					</div>
				</div>
				<div class="col-md-10" style="margin-top: 10px;">
					<a href="index.html" style="margin-left: 70%; font-size: small;">主页</a>
					<a href="index.html" style="margin-left: 20px;font-size: small;">投稿</a>
					<a href="index.html" style="margin-left: 20px;font-size: small;">联系我们</a>
					<a href="index.html" style="margin-left: 20px;font-size: small;">支持我们</a>
					<a style="margin-left: 1.25rem; font-size: small;" v-show="show" href="">加入我们</a>
					<a style="margin-left: 1.25rem; font-size: small;" v-show="show"
					   th:href="@{'http://localhost:8080/author/logoff'}">退出登录</a>
				</div>
			</div>

			<div class="row" style="margin-top: 100px;">
				<div class="col-md-2 asider">
					<div class="row" style="width: 100%;">
						<ul>
							<li class="li">
								<img class="img-circle" th:src="@{/img/booklist/feel.jpg}" style="width: 70px; height: 70px;">
							</li>
							<li class="li">
								<img class="img-circle" th:src="@{/img/booklist/pen.jpg}" style="width: 70px; height: 70px;">
							</li>
							<li class="li">
								<img class="img-circle" th:src="@{/img/booklist/test.jpg}" style="width: 70px; height: 70px;">
							</li>
							<li class="last_li">
								<img class="img-circle" th:src="@{/img/booklist/else.jpg}" style="width: 70px; height: 70px;">
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-10 content" style="margin-left: 0;">
					<div class="row">
						<table class="table table-bordered table-hover info table-condensed">
							<thead>
								<tr class="danger">
									<td v-show="false">id</td>
									<td>序号</td>
									<td>题目</td>
									<td>作者</td>
									<td>类型</td>
									<td>时间</td>
									<td>点评次数</td>
									<td>星数</td>
									<td>查看</td>
								</tr>
							</thead>
							<tbody>
								<!-- 循环遍历数据 -->
								<tr th:each="poet: ${session.user.poets}">
									<td th:text="${poet.id}"></td>
									<td th:text="${poet.name}"></td>
									<td th:text="${session.user.username}"></td>
									<td th:text="${poet.type}"></td>
									<td th:text="${poet.date}"></td>
									<td th:text="${poet.commentTime}"></td>
									<td th:text="${poet.starLevel}"></td>
									<td>
										<a  th:href="@{'http://localhost:8080/poet/poetinfo?id='+${poet.id}}">查看</a>
										<a  th:href="@{'http://localhost:8080/poet/update?id='+${poet.id}}">查看</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">

		var vm = new Vue({
			el:'#app',
			data(){
				return{
					userId:0,
					show:true,
					name:'',
					gender:'',
					level:0
				}
			}
		})
	</script>
</html>
